
<template>
  <div class="wrapper-contion">
    <div class="wrapper">
      <div class="Logo-Title">设备管理</div>
      <span class="Logo-sub">随时掌握运行状态，实现设备全生命周期、系统化、<br />数字化统一管理</span>
    </div>
    <div class="wrapper-white">
      <div class="top-Title">为设备“增智”</div>
      <span class="top-sub"
        >设备管理系统是一个以计算机网络技术为基础，对设备的现实运行方式进行系统的管理，把传统的业务流程通过软件系统有机的串联起来，形成系统的设备管理体系。</span
      >
      <div class="wrapper-list wow bounceInRight" data-wow-duration="2s">
        <div class="wrapper-list-num">{{ topArr[index].num }}</div>
        <div class="wrapper-list-txt">
          <span class="wrapper-list-txt">{{ topArr[index].sub }}</span>
        </div>
      </div>
      <div class="wrapper-midd-image">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/c418d1e678aa317989f77925a89f00e2.png"
        />
      </div>
      <div class="wrapper-midd-image1 image-an" @click="changeImg(0)">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/01ce1f6ec0b9305ba30d8779aac6fa11.png"
        />
      </div>
      <div class="wrapper-midd-image2 image-an" @click="changeImg(1)">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/7ce18c7b21b8390da55d94a805bf0d85.png"
        />
      </div>
      <div class="wrapper-midd-image3 image-an" @click="changeImg(2)">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/498568e4e63c384d9b8e8e317612d0e4.png"
        />
      </div>
    </div>
    <div class="zengzhi-white">
      <div class="top-Title">系统架构</div>
      <div class="zengzhi-blue">各个击破</div>
      <div scroll-x="true" style="width: 100%; overflow-x: auto">
        <div class="zengzhi-view-item">
          <div class="zengzhi-list">
            <div class="zengzhi-image wow fadeInRight" 
            data-wow-duration="0.4s" data-wow-delay="0.2s">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/ae4f8256755539bb8076977fdb027dca.png"
              />
            </div>
            <div class="zengzhi-image wow fadeInRight" 
            data-wow-duration="0.4s" data-wow-delay="0.4s">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/2b78bd16fdd83f33ada6b28aad60da4d.png"
              />
            </div>
            <div class="zengzhi-image wow fadeInRight" 
            data-wow-duration="0.4s" data-wow-delay="0.6s">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/e8d9ca00fb7a378099f62fe7a3d6df9c.png"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="zengzhi-url">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/37704ce38e7036cd854935d1d3481b8b.png"
        />
      </div>
    </div>
    <div class="management-wrapper">
      <div class="top-Title">设备管理三步走</div>
      <span class="top-sub management-sub"
        >设备管理系统是一个以计算机网络技术为基础，对设备的现实运行方式进行系统的管理，把传统的业务流程通过软件系统有机的串联起来，形成系统的设备管理体系。</span
      >
      <div class="management-line">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/a5955c00b15e35f0a7b7860e3e12cfc7.png"
        />
      </div>
      <div class="management-frist">
        <div class="management-frist-img">第一步</div>
        <div class="management-frist-txt">设备<span class="management-frist-sub">互联</span></div>
      </div>
      <div class="management-frist-image">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/90cf8c140169394f90afbb2f090c9886.png"
        />
      </div>
      <div class="management-line">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/a5955c00b15e35f0a7b7860e3e12cfc7.png"
        />
      </div>
      <div class="management-frist">
        <div class="management-frist-img">第二步</div>
        <div class="management-frist-txt">全面<span class="management-frist-sub">管理</span></div>
      </div>
      <div scroll-x="true" style="width: 100%; overflow-x: auto">
        <div class="management-view-item">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/2fd6d89546b43c0ab70a35931b68b281.png"
          />
        </div>
      </div>
      <div class="management-line">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/a5955c00b15e35f0a7b7860e3e12cfc7.png"
        />
      </div>
      <div class="management-frist">
        <div class="management-frist-img">第三步</div>
        <div class="management-frist-txt">预测性<span class="management-frist-sub">维护</span></div>
      </div>
      <div class="management-third-list">
        <div class="management-third-left wow fadeInUp">
          <div class="management-third-white">
            <div class="management-third-img">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/debb7e6cdff13fcbaf302370be3dca97.png"
              />
            </div>
            <div class="management-third-txt">状态监测</div>
            <span class="management-third-sub"
              >通过设备数字化接口或外置传感器等方式，采集所需数据，为后续工作提供数据基础。</span
            >
          </div>
          <div class="management-third-white">
            <div class="management-third-img">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/a7663132063f31fd90c18cd31e3775fa.png"
              />
            </div>
            <div class="management-third-txt">故障诊断</div>
            <span class="management-third-sub"
              >根据设备实时状态及相关参数，基于大数据等技术对参数进行数据清洗、数据分析，诊断设备是否正常。</span
            >
          </div>
        </div>
        <div class="management-third-left management-third-right  wow fadeInUp">
          <div class="management-third-white">
            <div class="management-third-img">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/f55389583f0b3e8d89728a9e8c79dad6.png"
              />
            </div>
            <div class="management-third-txt">状态预测</div>
            <span class="management-third-sub">根据设备的运行状态与参数信息，评估部件当前状态并预测未来状态。</span>
          </div>
          <div class="management-third-white">
            <div class="management-third-img">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/993d62e33136385bbe853ebe2312f898.png"
              />
            </div>
            <div class="management-third-txt">维护决策</div>
            <span class="management-third-sub"
              >系统基于知识库及相关算法，根据状态监测、故障诊断和状态预测的结果，进行维护可行性分析，以可视化手段给出维护计划，包括维护时间、地点、人员和内容等。</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="function-wrapper">
      <div class="function-back">
        <div class="function-Title">功能实现</div>
        <span class="function-sub"
          >纺织企业工序多，设备多，管理难度大。<br />数智纺设备管理系统解决方案以提高设备运行的经济效<br />益为目标，协助纺织企业建立综合模式下的科学设备管<br />理体系，以达到最佳的纺织生产运营状态。</span
        >
      </div>
      <!-- <swiper class="function-swiper round-dot" indicator-dots="true" interval="5000" duration="500"
    indicator-color="rgba(62, 104, 255, 0.4)" indicator-active-color="#3E68FF">
    <swiper-item wx:for="{{listArr}}" wx:key='unquine' class="function-swiper-item">
      <div class="function-swiper-item" data-index='{{index}}'>
        <block wx:for="{{listArr[index]}}" wx:for-item="child">
      <div class="function-white">
        <div class="function-num">
          <van-image width="100%" height="100%" fit="cover" src="{{child.url}}" />
        </div>
        <div class="function-white-title">{{child.txt}}</div>
        <div class="function-white-sub">{{child.sub}}</div>
      </div>
    </block>
      </div>
    </swiper-item>
  </swiper> -->

      <div class="swiper-container list-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in listArr" :key="index">
            <div class="function-swiper-item">
              <div v-for="(child, indexs) in listArr[index]" :key="indexs">
                <div class="function-white">
                  <div class="function-num">
                    <van-image width="100%" height="100%" fit="cover" :src="child.url" />
                  </div>
                  <div class="function-white-title">{{ child.txt }}</div>
                  <div class="function-white-sub">{{ child.sub }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import Swiper from 'swiper'
import { WOW } from 'wowjs'

export default {
  data() {
    return {
      index: 0,
      listArr: [
        [
          {
            url: 'https://oss.cloudcpc.com/3c9c92566f2c364bb70be63f549bf4ae.png',
            txt: '一机一档管理',
            sub: '协助管理纺机设备：技术资料管理，设备价值管理，折旧管理等。'
          },
          {
            url: 'https://oss.cloudcpc.com/5b9784f543173379a4259b6f0db6a44a.png',
            txt: '设备状态管理',
            sub: '设备启停状态，维修保养状态等管理。'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/ea12150806183f238e2ad4ba4243b76b.png',
            txt: '设备计划管理',
            sub: '设备巡检、保养，做好安全工作计划，由系统进行提醒，避免漏做、晚做。'
          },
          {
            url: 'https://oss.cloudcpc.com/041e5a49c32c30ddab12d262805837b4.png',
            txt: '设备维修、巡检、保养',
            sub: '管理登记设备使用、维修等信息，管理设备物资的出库，以及旧料回收入库，巡检保养登记。'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/c1974e8e057a388f8fa14cab015ba34a.png',
            txt: '设备租借管理',
            sub: '闲置设备借出给其他部门或者单位使用，产生二次价值临时使用设备，可登记从其他部门或者单位租入，避免成本浪费。'
          },
          {
            url: 'https://oss.cloudcpc.com/b5969cf7435a3c55971efd838722a3f9.png',
            txt: '库存管理',
            sub: '设备盘点、设备报废以及备件的日常管理。'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/39cdac6447cb37f4875aab8609fa9d64.png',
            txt: '报表管理',
            sub: '查询、统计各类信息报表,包括设备的三率报表、设备维修成本、设备状态、设备跟踪专备件库存等。'
          }
        ]
      ],
      topArr: [
        {
          num: '01',
          sub: '设备对外的通讯功能形同虚设，全靠人工输入程序控制。'
        },
        {
          num: '02',
          sub: '设备运行状态、生产信息、甚至故障信息等不透明，出现问题易造成损失。'
        },
        {
          num: '03',
          sub: '设备性能无法自动获知，人工事后反馈效率低、易出错。建立在人为感知基础上的决策更是不及时、不科学，甚至是错误的。'
        }
      ]
    }
  },
  mounted() {
    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })
    this.$nextTick(() => {
      var swiper = new Swiper('.list-swiper', {
        pagination: {
          el: '.swiper-pagination'
        }
      })
    })
    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
  },

  methods: {
    changeImg(e) {
      console.log(e)
      this.index = e
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index';
</style>

